<template>
  <div class="demo4-wrap">
    <h1>当前求和为：{{ sum }}</h1>
    <button @click="sum++">点我+1</button>
    <hr>
    <h1>当前点击时鼠标的坐标为：x：{{ point.x }}，y：{{ point.y }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue';
import { operatePoint } from '@/hooks/usePoint.js';

export default {
  name: 'Demo4',
  setup() {
    // 数据
    const sum = ref(0);

    const point = operatePoint();

    return {
      sum,
      point
    };
  }
};
</script>

<style lang="scss" scoped>
.demo4-wrap {
  & > h1 {
    margin-bottom: 20px;
  }
  & > button {
    cursor: pointer;
  }
}
</style>
